<template>
  <div>
    <!-- 基础设置部分 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础设置" name="first">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>系统基本设置</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="setshow"
              >修改</el-button
            >
          </div>
          <div
            v-for="(item, index) in Persoinfo"
            :key="index"
            class="text item"
          >
            {{ item.title }}
            <div v-show="item.title != '是否绑定手机号 ：'">
              <input
                type="text"
                v-model="item.val"
                :style="{ border: showBorder ? '' : '0' }"
                :class="{ mylpt: showBorder }"
              />
            </div>
            <div v-show="item.title == '是否绑定手机号 ：'">
              <el-switch
                v-model="ro_value"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </div>
            <!-- <input
              type="text"
              v-model="item.val"
              :style="{ border: showBorder ? '' : '0' }"
              :class="{ mylpt: showBorder }"
            /> -->
          </div>
          <!-- <div class="text item">
            是否开启手机号码绑定 ：
            <el-switch
              v-model="ro_value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div> -->
          <!-- logo上传 -->
         <div class="text item rologo">
            <p>logo修改：</p>
            <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
           <el-button type="primary" @click="setlose()" class="basesave"
            >保存修改</el-button
          ><!-- v-show="savechange" -->
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second"
        ><el-card class="box-card">
          <div slot="header" class="clearfix tagshow">
            <span @click="tlag()">标签分类</span>
          </div>
          <!-- 循环标签 -->
          <div class="parent">
            <el-tag
              :key="item.id"
              v-for="item in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(item)"
              :color="item.type"
            >
              {{ item.tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              v-show="tagshow"
              >+ New Tag</el-button
            >
          </div>
        </el-card>
        <!-- 短信配置 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix tagshow">
            <span>短信配置</span>
          </div>
          <!-- 循环标签 -->
          <div>
            <el-form
              label-width="100px"
              class="demo-ruleForm"
              :hide-required-asterisk="true"
            >
              <el-form-item label="手机号" placeholder="请输入内容">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="商户号" placeholder="请输入内容">
                <el-input></el-input>
              </el-form-item>
              <el-form-item label="商户秘钥" placeholder="请输入内容">
                <el-input></el-input>
              </el-form-item>
              <el-button type="submit">保存</el-button>
            </el-form>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third"
        ><el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>卡片名称</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            >
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card></el-tab-pane
      >
      <el-tab-pane label="推广管理" name="fourth">
        <!-- 推广方案 -->
        <div class="proplan">
          <span>方案一：任务量</span>
          <el-steps :active="2" align-center>
            <el-step title="任务量1" description="奖励金x元"></el-step>
            <el-step title="任务量2" description="奖励金x元"></el-step>
            <el-step title="任务量3" description="奖励金x元"></el-step>
            <el-step title="任务量4" description="奖励金x元"></el-step>
          </el-steps>
        </div>
        <div class="proplan">
          <span>方案二：分享人数</span>
          <el-steps :active="2" align-center>
            <el-step title="分享1人" description="奖励金x元"></el-step>
            <el-step title="累计分享2人" description="奖励金x元"></el-step>
            <el-step title="累计分享3人" description="奖励金x元"></el-step>
            <el-step title="累计分享4人" description="奖励金x元"></el-step>
          </el-steps>
        </div>
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>推广记录</span>
            </div>
            <div>
              <el-table :data="topro" stripe style="width: 100%"
                ><!--:data="tableData" -->
                <el-table-column prop="id" label="用户id" width="180">
                </el-table-column>
                <el-table-column prop="ic_name" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="ic_proxy" label="上级用户id" width="180">
                </el-table-column>
                <el-table-column prop="ic_proxy" label="上级用户名" width="180">
                </el-table-column>
                <el-table-column prop="ic_money" label="邀请金额" width="180">
                </el-table-column>
                <el-table-column prop="ic_time" label="邀请时间" width="180">
                </el-table-column>
                <el-table-column prop="ic_remark" label="备注">
                </el-table-column>
              </el-table>
              <!-- 页码显示 -->
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="proinfo.procurrentpage"
                  :page-sizes="[1, 2, 5, 10]"
                  :page-size="proinfo.propagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="prototal"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
function getRgba() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let a = 0.1;
  let rgba = "(" + r + "," + g + "," + b + "," + a + ")";
  return `rgba${rgba}`;
}
export default {
  data() {
    return {
      //系统基本设置
      sysnam: {},
      //推广管理页码
      prototal: 0,
      proinfo: {
        proquery: "",
        //当前页数
        procurrentpage: 1,
        //当前每页显示多少数据
        propagesize: 2,
      },
      //上传图片
      //是否开启手机绑定
      ro_value: true,
      //elment标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      tagshow: false,
      id: "",
      tag: "",
      other: "",
      topro: [],
      // resTagData: [],
      savechange: false,
      showBorder: false,
      activeName: "first",
      Persoinfo: [
        { title: "系统名设置 ：", val: "挣钱app" },
        { title: "客服联系方式 ：", val: "154668236" },
        { title: "是否绑定手机号 ：", val: 1 },
      ],
      shopinfo: ["收款账户信息"],
    };
  },
  created() {
    this.handleInputConfirm();
    this.tlag();
    this.getTopro();
  },
  mounted() {
    this.tlag();
  },
  methods: {
    //获取推广数据
    async getTopro() {
      const { data: res } = await this.$http.get("/admin/iProxy", {
        "page-size": 1,
        currentpage: 1,
      });
      this.topro = res.data.data;
      this.prototal = res.data.totalCount;
      console.log(res, 9999999);
      // console.log(prototal,88888)
    }, //监听数据条码改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.proinfo.propagesize = newSize;
      this.getTopro();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.proinfo.procurrentpage = newPage;
      this.getTopro();
    },
    // 上传logo图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //elment标签方法
    async handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      const res = await this.$http.delete("/admin/delTag", { id: tag.id });
      console.log(res);
      if (res.data.code == 200) {
        return this.$message.success(res.data.msg);
      }
    },
    //增加标签
    async showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
      // const { data: res } = await this.$http.post("/admin/actionTag",{tag: this.inputValue})
      // console.log(res)
    },

    async handleInputConfirm() {
      let inputValue = this.inputValue;
      console.log(inputValue);
      let obj = [{ type: "while", tag: "" }];
      if (inputValue) {
        const { data: res } = await this.$http.post("/admin/actionTag", {
          tag: this.inputValue,
        });
        // this.tlag()
        obj.type = getRgba();
        obj.tag = inputValue;
        this.dynamicTags.push(obj);
        console.log("11111111" + obj);
      }
      console.log(this.dynamicTags);
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    setshow() {
      this.showBorder = true;
      this.savechange = true;
    },
    setlose() {
      console.log(val);
      this.showBorder = false;
      this.savechange = false;
    },
    async tlag() {
      const { data: res } = await this.$http.get("/admin/allTag");
      // let resData = JSON.parse(res).data;
      this.dynamicTags = res.data;
      this.tagshow = true;
      console.log(this.dynamicTags);
    },
  },
};
</script>


<style lang="less" scoped>
.proplan span {
  float: left;
}
.rologo {
  display: flex;
  align-items: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.basesave {
  float: right;
}
[slot="header"] {
  padding: 0;
}
.parent {
  overflow-x: scroll;
  width: 100%;
  margin: 0 auto;
  height: 50px;
  // background-color: #ccc;
  overflow: auto;
}
// .tagshow {
//   cursor: pointer;
// }
//elemt标签样式
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-form {
  width: 25%;
}
.body {
  padding: 0;
}
.el-card {
  border: none;
  text-align: left;
}
.el-tabs {
  justify-content: space-around;
  background: none;
}
.mylpt {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
}
.text {
  margin-top: 10px;
  > input {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 32px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
  }
}
.bdno {
  border: none;
}
</style>